<template>
  <div id="goods_app">
    <div class="control">
      <el-button type="primary" plain round @click="isShow.flag=true">新增</el-button>
    </div>
    <el-table :data="goodsList" style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180"
        fixed="left"
      ></el-table-column>
      <el-table-column prop="firstcatename" label="一级分类" width="180">
      </el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" width="180">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="img" label="商品图片" width="180">
        <template v-slot="prop">
          <img :src="$static_url + prop.row.img" width="40px" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="零售价格" width="180">
        <template v-slot="prop"> &yen;{{ prop.row.price }} </template>
      </el-table-column>
      <el-table-column prop="market_price" label="市场价格" width="180">
        <template v-slot="prop"> &yen;{{ prop.row.market_price }} </template>
      </el-table-column>
      <el-table-column prop="isnew" label="是否新品" width="180">
          <template v-slot="prop">
              <el-switch
                v-model="prop.row.isnew"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                >
                </el-switch>
          </template>    
        
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" width="180">
          <template v-slot="prop">
              <el-switch
                v-model="prop.row.ishot"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                >
                </el-switch>
          </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
          <template v-slot="prop">
              <el-button type="success" size="mini" plain round v-if="prop.row.status === 1">正常</el-button>      
              <el-button type="danger" size="mini" plain round v-else>禁用</el-button>
          </template>    
      </el-table-column>
      <el-table-column prop="address" label="操作" width="180" fixed="right">
        <template v-slot="prop">
        <el-button type="warning" size="mini" plain round @click="edit_goods(prop.row)">编辑</el-button>
        <el-button type="danger" size="mini" plain round @click="del_goods(prop.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :page-size="pagintor.size" background layout="prev, pager, next, sizes" :page-sizes="[5, 10, 15]" :total="count" @current-change="changePage">
    </el-pagination>

    <Dialog :isShow="isShow" @reload="reload" ref="dialog_ref"/>
    
  </div>
</template>

<script>
import Dialog from "../components/AddGoods.vue"
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      isShow: {flag: false},
      pagintor: {
        page: 1,
        size: 5,
      },
    };
  },
  created() {
    this.goodsCountActions(); 
    this.goodsListActions(this.pagintor);
  },
  methods: {
    del_goods(id){
      this.$delMessage(()=>{
        this.$axios.post("/goodsdelete",{id}).then(res=>{
            if(res.code === 200){
                //提示删除成功
                this.$message({
                  type: "success",
                  message: "删除成功"
                })
                //从载页面
                this.reload()
            }
        })
      })
      
    },
    edit_goods(obj){
      //打开模态框
      this.isShow.flag = true
      //设置数据
      // ...mapMutations("设置二级分类","二级分类参数")
      this.$refs.dialog_ref.setData(obj)
    },
    reload(){
         this.goodsCountActions()
         this.goodsListActions(this.pagintor);
    },
    changePage(page){
         this.pagintor.page = page
         this.goodsCountActions()
         this.goodsListActions(this.pagintor);
    },
    ...mapActions("good_model", ["goodsCountActions", "goodsListActions"]),
  },
  computed: {
    ...mapState("good_model", ["goodsList", "count"]),
  },
  components: {
      Dialog
  }
};
</script>

<style>
</style>